<template>
  <div class="app-container">
    <div class="trading_head1">
      <div class="head_two">
        <p>
          待提现金额（元）
        </p>
        <div class="down">
          <div class="down_right">{{embodying.totalmoney}}</div>
          <div class="down_left">
            <p>昨日提现人数（人） &nbsp;&nbsp;{{embodying.yesterdayman}}</p>
            <p>今日提现人数（人） &nbsp;&nbsp;{{embodying.todayman}}</p>
            <p>昨日提现金额（元） &nbsp;&nbsp;{{embodying.yesterdaymoney}}</p>
            <p>今日提现金额（元） &nbsp;&nbsp;{{embodying.todaymoney}}</p>
          </div>
        </div>
      </div>

      <div class="head_two">
        <p>
          已提现金额（元）
        </p>
        <div class="down">
          <div class="down_right">{{embodyed.totalmoney}}</div>
          <div class="down_left">
            <p>昨日提现人数（人） &nbsp;&nbsp;{{embodyed.yesterdayman}}</p>
            <p>今日提现人数（人） &nbsp;&nbsp;{{embodyed.todayman}}</p>
            <p>昨日提现金额（元） &nbsp;&nbsp;{{embodyed.yesterdaymoney}}</p>
            <p>今日提现金额（元） &nbsp;&nbsp;{{embodyed.todaymoney}}</p>
          </div>
        </div>
      </div>
    </div>

    <div class="filter-container bor-container">
      <el-form size="mini" :inline="true">
        <el-form-item class="input_co"   label="用户昵称">
          <el-input v-model="formInline.nickname" placeholder=""></el-input>
        </el-form-item>
        <el-form-item class="input_co"   label="用户ID">
          <el-input v-model="formInline.userid" placeholder=""></el-input>
        </el-form-item>
        <el-form-item class="input_co"   label="提现状态">
          <el-select v-model="formInline.status" placeholder="">
            <el-option label="全部" value="">全部</el-option>
            <el-option label="待审核" value="0">待审核</el-option>
            <el-option label="提现成功" value="1">提现成功</el-option>
            <el-option label="提现失败" value="2">提现失败</el-option>
          </el-select>
        </el-form-item>
        <br>
        <el-form-item class="input_co"   label="手机号">
          <el-input v-model="formInline.phone" placeholder=""></el-input>
        </el-form-item>
        <el-form-item prop="begintime" class="input_co"   label="注册时间">
          <el-date-picker class="input_s"  v-model="formInline.begintime" type="datetime" placeholder="" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
        </el-form-item>
        <el-form-item prop="endtime" class="input_co1"   label="——">
          <el-date-picker class="input_s"  v-model="formInline.endtime" type="datetime" placeholder="" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
        </el-form-item  >
        <el-button size="mini" @click="query()" icon="el-icon-search">查询</el-button>
      </el-form>
    </div>
    <!--<div class="filter-container btn-right">
      <el-button size="mini"  type="primary" @click="dialog.status = true" icon="el-icon-plus">添加banner图</el-button>
    </div>-->
    <el-table v-loading="loading" border :data="tableData">
      <el-table-column
        type="index"
        width="50">
      </el-table-column>
      <el-table-column prop="truename" label="用户信息">
          <template slot-scope="scopt">
             {{scopt.row.truename}}(ID:{{scopt.row.user_id}})
          </template>
      </el-table-column>
      <el-table-column prop="money" label="提现金额（元）">

      </el-table-column>
      <el-table-column prop="name" label="提现方式">
          <template slot-scope="scopt">
              <el-tag type="success" size="mini" v-if="scopt.row.embodytype == 0">微信</el-tag>
              <el-tag type="danger" size="mini" v-else-if="scopt.row.embodytype == 1">支付宝</el-tag>
          </template>
      </el-table-column>
      <el-table-column prop="account" label="提现账户">

      </el-table-column>
      <el-table-column prop="createtime" label="申请时间">

      </el-table-column>
      <el-table-column prop="remark" label="状态">
          <template slot-scope="scopt">
              <el-tag type="success" size="mini" v-if="scopt.row.embodystatustype == 0">未处理</el-tag>
              <el-tag type="danger" size="mini" v-else-if="scopt.row.embodystatustype == 1">已处理</el-tag>
              <el-tag type="danger" size="mini" v-else-if="scopt.row.embodystatustype == 2">拒绝</el-tag>
          </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
                  <el-button  size="mini" type="warning" @click="onApplication(scope.row, scope.$index,1)" icon="el-icon-edit-outline" >同意</el-button>
                  <el-button  size="mini" type="warning" @click="onApplication(scope.row, scope.$index,0)" icon="el-icon-edit-outline" >驳回</el-button>
                 <el-button size="mini"   @click="openEdit(scope.row)" style="margin-top:10px;">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="pagination-right"
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="formInline.page"
      :page-sizes="[10]"
      :page-size="formInline.pagenum"
      layout="total, sizes, prev, pager, next, jumper"
      :total="formInline.total">
    </el-pagination>
    <withdrawal-application-edit
      @close="close"
      @success="success"
      v-if="dialog.status"
      :id="dialog.id"
      :user_id="dialog.user_id"
      :orderno="dialog.orderno"
      :dialog_="dialog.status"
    ></withdrawal-application-edit>
  </div>
</template>
<script>
  import { getWithdrawalApplicationListAPI , getWithdrawalMoneyAPI , applicationAPI} from '@/api/tradingcenter'
  import { mapGetters } from 'vuex'
  import WithdrawalApplicationEdit from './components/WithdrawalApplicationEdit'
  //import moment from 'moment'
  export default {
    // 角色管理
    name: 'WithdrawalApplication',
    components: {
      WithdrawalApplicationEdit
    },
    data() {
      return {
        formInline: {
          nickname: '',
          userid:'',
          status:'',
          phone:'',
          begintime:'',
          endtime:'',
          page: 0,
          pagenum: 10,
          total: 0
        },
        embodying: {
          totalmoney: '',
          yesterdayman: '',
          todayman: '',
          yesterdaymoney: '',
          todaymoney: ''
      },
        embodyed: {
          totalmoney: '',
          yesterdayman: '',
          todayman: '',
          yesterdaymoney: '',
          todaymoney: ''
      },
        dialog: {
          status: false,
          id: null,
          user_id:'',
          orderno:''
        },
        loading: false,
        tableData: [],
      }
    },
    computed: {
      ...mapGetters([
        'buttons',
      ])
    },
    methods: {
      // 打开编辑页面
      openEdit(obj) {
        this.dialog.id = obj.id
        this.dialog.status = true
        this.dialog.user_id = obj.user_id
        this.dialog.orderno = obj.orderno
      },
      // 操作成功更新列表
      success() {
        this.getWithdrawalList()
      },
      close() {
        this.dialog.status = false
        this.dialog.id = null
      },
      // 同意或者驳回
      onApplication(obj, index,status) {  // status:0通过，1驳回
        /*this.$confirm('是否删除该banner图?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          debugger
          obj.delLoading = true
          deleteRoleAPI({ id: obj.Id}).then(res => {
            obj.delLoading = false
            if (res.code === 0) {
              this.$emit('success')
              this.$message.success('操作成功')
              this.getWithdrawalList()
            } else {
              this.$message.error(res.message)
            }
          })
        }).catch(() => {
        });*/
        let param = {
          id: obj.id,
          permit:status,
          userid:obj.user_id
        }
        applicationAPI(param).then(res => {
          obj.delLoading = false
          if (res.code === 0) {
            this.$emit('success')
            this.$message.success('操作成功')
            this.getWithdrawalList()
          } else {
            this.$message.error(res.msg)
          }
        })
      },
      // 点击查询事件
      query() {
        this.formInline.page = 1
        this.getWithdrawalList()
      },
      // pageSize发生改变触发
      handleSizeChange(val) {
        this.formInline.pageNum = 1
        this.formInline.pageSize = val
        this.getWithdrawalList()
      },
      // pageNum 发生改变触发
      handleCurrentChange(val) {
        this.formInline.page = val
        this.getWithdrawalList()
      },
      // 获取列表
      getWithdrawalList() {
        this.loading = true
        getWithdrawalApplicationListAPI(this.formInline).then(res => {
          this.loading = false
          if (res.code === 0) {
            this.tableData = res.data.list
            this.formInline.total = res.data.total;
          } else {
            this.$message.error(res.message)
          }
        })
      },
      // 获取顶部提现金额的接口
      // 获取列表
      getSumWithdrawalList() {
        this.loading = true
        getWithdrawalMoneyAPI(this.formInline).then(res => {
          this.loading = false
          if (res.code === 0) {
            this.embodying = res.data.embodying
            this.embodyed = res.data.embodyed
          } else {
            this.$message.error(res.message)
          }
        })
      }
    },
    mounted() {
      this.getWithdrawalList();
      this.getSumWithdrawalList();
    }
  }
</script>

<style>
  .trading_head1{
    background: #33CCCC;
    height: 205px;;
    color: white;
    padding: 11px;
    margin-bottom: 10px;
  }
  .head_two{
    width:49%;
    height:120px;
    float:left;
  }
  .down{
    margin-left:20px;
  }
  .down_left{
    float: left;
    margin-top: -9px
  }
  .down_right{
    float: left;
    margin-right: 20px;
    margin-top: 11px;
    font-size: 32px;
  }
</style>
